<template>
  <view class="draft-view">
    <!-- 导航栏 -->
    <view class="tab-box">
      <view class="tab-item" :class="data.tabIndex == 0 ? 'tab-item-actived' : ''" @tap="changeTab(0)">
        <text class="tab-text">笔记</text>
      </view>
      <view class="tab-item" :class="data.tabIndex == 1 ? 'tab-item-actived' : ''" @tap="changeTab(1)">
        <text class="tab-text">资讯</text>
      </view>
    </view>	
    <view class="note-list-view">
       <swiper class="tab-swiper" :current="data.tabIndex" @change="changeTab($event.detail.current)">
         <!-- 关注 -->
          <swiper-item class="tab-swiper-item">
            <scroll-view class="note-list" scroll-y="true">
              <view class="waterfall">
                <!-- 笔记 -->
                <view class="flowList">
                  <view class="note" v-for="idx in data.noteLeft">
                    <!-- 笔记封面 -->
                    <view class="note-img-box">
                      <image mode="widthFix" class="note-img" :src="data.noteList[idx].noteImg"></image>
                    </view>
                    <!-- 笔记标题内容 -->
                    <view class="note-content-box">
                      <rich-text class="note-text">{{data.noteList[idx].noteText}}</rich-text>
                    </view>
                    <!-- 删除按钮 -->
                    <view class="del-act-box">
                        <view class="del-act-item" @click="delDraft(idx)">
                          <image class="del-act-img" src="../../static/img/remove.png"></image>
                          <text>删除</text>
                        </view>
                    </view>
                  </view>
                </view>
                <view class="flowList">
                 <view class="note" v-for="idx in data.noteRight">
                   <!-- 笔记封面 -->
                   <view class="note-img-box">
                     <image mode="widthFix" class="note-img" :src="data.noteList[idx].noteImg"></image>
                   </view>
                   <!-- 笔记标题内容 -->
                   <view class="note-content-box">
                     <rich-text class="note-text">{{data.noteList[idx].noteText}}</rich-text>
                   </view>
                    <!-- 删除按钮 -->
                    <view class="del-act-box">
                        <view class="del-act-item" @click="delDraft(idx)">
                          <image class="del-act-img" src="../../static/img/remove.png"></image>
                          <text>删除</text>
                        </view>
                    </view>
                 </view>         
              </view>   
              </view>
            </scroll-view>
         </swiper-item>
         <!-- 资讯 -->
          <swiper-item class="tab-swiper-item">
           <scroll-view scroll-y="true" class="trip-new">           
             <view class="trip-item">

             </view>
           </scroll-view>
         </swiper-item>
        </swiper>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
 
const data = reactive({
  tabIndex:0,
  pageNum: 1,//第几页
  pageSize: 3,//显示多少条
  noteList:[],
  noteLeft:[0,1,2],
  noteRight:[2,1,0],
});

// 修改tab页面
function changeTab(index){
  data.tabIndex = index
}

function delDraft(idx){
  console.log("删除草稿"+idx)
}

function delDraftNew(idx){
  console.log("删除资讯草稿"+idx)
}


</script>

<style>
.draft-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.tab-box{
  width: 100vw;
  display: flex;
  height: 7vh;
  background-color: #fff;
}
.tab-item{
  display: flex;
  align-items: center;
  padding-inline: 10px;
}
.tab-item-actived{
  border-bottom: 2px solid #89C0FF;
}
.tab-text{
  font-size: 20px;
  font-weight: bold;
}
.note-list-view{
  width: 100vw;
}
.note-list{
  width: 100vw;
  height: 93vh;
  background-color: #f4f4f4;
}
.tab-swiper{
  width: 100vw;
  height: 93vh;
}
.waterfall {
  width: 100vw;
  display: flex;
}
.flowList{
  display: flex;
  flex-direction: column;
  margin-inline: auto;
}
.note{
  width: 48vw;
  background-color: #fff;
  border-radius: 7px;
  /* 防止切割 */
  break-inside: avoid;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}
.note-img{
  display: block;
  width: 48vw;
  min-height: 10vh;
  max-height: 40vh;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 7px; /* 左上角圆角 */
  border-top-right-radius: 7px; /* 右上角圆角 */
}
.note-content-box{
  max-width: 48vw;
  height: 50px;
  padding: 5px;
  /* 隐藏溢出容器的文本 */
  overflow: hidden;
  /* 在文本溢出时显示省略号 */
  text-overflow: ellipsis;
}
.note-text{
  font-size: 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.del-act-box{
  display: flex;
  margin-left: auto;
  margin-top: auto;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
}
.del-act-item{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 50px;
  margin-left: 10px;
}
.del-act-img{
  width: 25px;
  height: 25px;
}

.trip-new{
  width: 100vw;
  height: 93vh;
}
.trip-item{
  width: 95vw;
  height: 25vh;
  background-color: #fff;
  border-radius: 20px;
  margin: auto;
  display: flex;
  margin-bottom: 8px;
}
.trip-img{
  min-width: 30%;
  max-width: 30%;
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.trip-des{
  display: flex;
  flex-direction: column;
  padding: 5px;
}
.trip-title{
  font-size: 18px;
  font-weight: bold;
}
.trip-road{
  font-size: 18px;
  margin-top: 10px;
  margin-left: 5px;
}
.trip-info{
  margin-top: auto;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}
.trip-avater{
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.trip-like-box{
  margin-left: auto;
  padding-right: 5px;
  display: flex;
  align-items: center;
}
.trip-name{
  margin-left: 5px;
  font-size: 15px;
  color: #949494;
}
.trip-like{
  width: 30px;
  height: 30px;
}
.trip-like-num{
  color: #949494;
}
</style>
